<template>
  <div class="customer-status">
    <div class="step flex">
      <div
        @click="handleStep(s)"
        :class="[
          {
            currentStep:
              (s.id < CustomerValue?.followUpProgress && s.id > -1) || currentStepId == s.id
          },
          { 'mr-20px': index != stepsList.length - 1 },
          {
            label: index != 0 && index != stepsList.length - 1 && index != stepsList.length - 2
          },
          'px-30px',
          'bg-#f0f0f0',
          'h-30px',
          'lh-30px',
          'text-12px'
        ]"
        v-for="(s, index) in stepsList"
        :key="index + 'step'"
        >{{ s.value }}</div
      >
    </div>
  </div>
</template>

<script setup>
import * as CustomerApi from '@/api/crm/customer'
const props = defineProps({
  CustomerValue: Object
})
const emit = defineEmits(['getCustomerValue'])

const stepsList = reactive([
  {
    id: 0,
    value: '待跟进'
  },
  {
    id: 1,
    value: '客户跟进'
  },
  {
    id: 2,
    value: '创建商机'
  },
  {
    id: 3,
    value: '创建合同'
  },
  {
    id: 4,
    value: '合同回款'
  },
  {
    id: 9,
    value: '赢单'
  },
  {
    id: -1,
    value: '输单'
  }
])
const currentStepId = ref('')
const handleStep = (item) => {
  if (props.CustomerValue.followUpProgress == 9 || props.CustomerValue.followUpProgress == -1)
    return
  ElMessageBox.confirm(`确定要将客户进度修改为：《${item.value}》吗？`, '提示', {
    confirmButtonText: '确 认',
    cancelButtonText: '取 消'
  })
    .then(async () => {
      const obj = JSON.parse(JSON.stringify(props.CustomerValue))
      obj.followUpProgress = item.id
      delete obj.labelList
      await CustomerApi.updateCustomer(obj)
      currentStepId.value = item.id
      ElMessage.success('操作成功')
      emit('getCustomerValue')
    })
    .catch()
}
</script>

<style lang="scss" scoped>
.customer-status {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  margin: 0 8px;
  padding: 16px;
  margin-bottom: 20px;
}
.step div {
  position: relative;
  cursor: pointer;
}
.step .label:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  left: 0px;
  border-top: solid 15px transparent;
  border-left: solid 15px #fff;
  border-bottom: solid 15px transparent;
}
.step .label:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  right: -15px;
  border-top: solid 15px transparent;
  border-left: solid 15px #f0f0f0;
  border-bottom: solid 15px transparent;
}
.step div:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.step div:first-child:after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  right: -15px;
  border-top: solid 15px transparent;
  border-left: solid 15px #f0f0f0;
  border-bottom: solid 15px transparent;
}

.step div:nth-child(6) {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.step div:nth-child(6):before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: 0px;
  left: 0px;
  border-top: solid 15px transparent;
  border-left: solid 15px #fff;
  border-bottom: solid 15px transparent;
}
.step div:last-child {
  border-radius: 20px;
  color: #e2953c;
}

.step .currentStep {
  background: var(--el-color-primary);
  color: #fff;
  &:before {
    border-left: solid 15px #fff !important;
  }
  &:after {
    border-left: solid 15px var(--el-color-primary) !important;
  }
}

.step div:last-of-type.currentStep {
  color: #fff;
}
</style>
